<template>
  <div class="policy-detail-container">
    <el-card class="policy-card">
      <template #header>
        <div class="card-header">
          <span>通知通告表单</span>
        </div>
      </template>

      <el-form ref="formRef" :model="formData" :rules="formRules" label-width="100px">
        <!-- 标题输入 -->
        <el-form-item label="标题" prop="title" class="form-item">
          <el-input
              v-model="formData.title"
              placeholder="请输入标题"
              clearable
              :maxlength="200"
              show-word-limit
          />
        </el-form-item>

        <!-- 作者 -->
        <el-form-item label="作者" prop="author" class="form-item">
          <el-input
              v-model="formData.author"
              placeholder="请输入作者"
              clearable
              :maxlength="50"
          />
        </el-form-item>

        <!-- 来源 -->
        <el-form-item label="来源" prop="source" class="form-item">
          <el-input
              v-model="formData.source"
              placeholder="请输入来源"
              clearable
              :maxlength="100"
          />
        </el-form-item>
        <!-- 正文编辑 -->
        <el-form-item label="正文" prop="contentHtml" class="form-item">
          <editor
              v-model="formData.contentHtml"
              :placeholder="'请输入通知通告正文内容'"
              :height="400"
          />
          <div class="editor-tip">支持富文本编辑，可插入图片、表格等内容</div>
        </el-form-item>

        <!-- 附件上传 -->
        <el-form-item label="附件" prop="fileId" class="form-item">
          <upload
              v-model="formData.fileId"
              :mode="'default'"
              :disabled="false"
              :text="formData.fileText"
              @onUploadSuccess="handleUploadSuccess"
          />
          <div class="upload-tip">支持上传的文件格式：gif,jpeg,jpg,png,psd,rar,zip,pdf,doc,docx,ppt,pptx,txt,xls,xlsx</div>
        </el-form-item>


        <!-- 排序 -->
        <el-form-item label="排序" prop="indexNum" class="form-item">
          <el-input-number
              v-model="formData.indexNum"
              :min="0"
              :max="9999"
              controls-position="right"
              style="width: 200px"
          />
        </el-form-item>

        <!-- 置顶标记 -->
        <el-form-item label="置顶" prop="topMark" class="form-item">
          <el-switch
              v-model="formData.topMark"
              active-value="1"
              inactive-value="0"
              active-text="是"
              inactive-text="否"
          />
        </el-form-item>

        <!-- 备注 -->
        <el-form-item label="备注" prop="remark" class="form-item">
          <el-input
              v-model="formData.remark"
              type="textarea"
              placeholder="请输入备注"
              :rows="3"
              :maxlength="500"
              show-word-limit
          />
        </el-form-item>

        <!-- 操作按钮 -->
        <el-form-item class="form-actions">
          <el-button type="primary" @click="handleSubmit('0')">保存草稿</el-button>
          <el-button type="success" @click="handleSubmit('1')">提交保存</el-button>
          <el-button @click="handleCancel">取消</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, computed } from 'vue';
import { ElMessage } from 'element-plus';
import Editor from '/@/components/editor/index.vue';
import Upload from '/@/views/common/upload.vue';
import { required } from '/@/components/wigem/utils/validateForm';
import { useRoute, useRouter } from 'vue-router';
import {saveForm,queryNoticeEntity} from "/@/api/notice/notice";
const route = useRoute();
const router = useRouter();

// 表单数据
const formData = reactive({
  noticeId: '', // 主键
  title: '', // 标题
  author: '', // 作者
  contentText: '', // 文本内容
  contentHtml: '', // HTML内容
  releaseMark: '0', // 发布标记 0未发布 1已发布
  source: '', // 来源
  topMark: '0', // 置顶标记 0否 1是
  remark: '', // 备注
  fileId: '', // 附件文件夹ID
  fileText: '', // 附件文本显示
  indexNum: 0, // 排序
  submitType: '0', // 提交类型 1是 0否
  type: '1', // 类型 1通知通告 0新闻
});

// 表单引用
const formRef = ref();

// 表单验证规则
const formRules = computed(() => {
  const rules: any = {
    title: required({
      required: true,
      maxLength: 200,
      message: '请输入标题'
    }),

    contentHtml: required({
      required: true,
      message: '请输入正文内容'
    }),
  };

  return rules;
});

// 处理附件上传成功
const handleUploadSuccess = (data) => {
  formData.fileId=data.folderId
  formData.fileText = data.fileName;
  ElMessage.success('附件上传成功');
};
// 提交表单
const handleSubmit = (submitType: string) => {
  formData.submitType = submitType;

  formRef.value.validate((valid) => {
    if (valid) {
      // 从富文本编辑器中提取纯文本
      const tempDiv = document.createElement('div');
      tempDiv.innerHTML = formData.contentHtml;
      formData.contentText = tempDiv.textContent || tempDiv.innerText || '';


      saveForm(formData).then((res) => {

        if (!res.success) {
          ElMessage.success(res.msg);
          return;
        }else{
          ElMessage.success(res.msg);
        }
      });
    } else {
      ElMessage.error('请完善表单信息');
    }
  });
};

// 取消操作
const handleCancel = () => {
  router.back();
};

// 初始化函数
const init = () => {
  const noticeId = route.query.id as string;
  if (noticeId) {
    // 这里添加根据ID加载数据的逻辑
    queryNoticeEntity(noticeId).then((res) => {
      Object.assign(formData, res.data);
    });
  }
};

// 页面加载时初始化
init();
</script>

<style scoped>
.policy-detail-container {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: 100vh;
}

.policy-card {
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 16px;
  font-weight: bold;
  color: #303133;
}

.form-item {
  margin-bottom: 24px;
}

.editor-tip,
.upload-tip {
  margin-top: 8px;
  font-size: 12px;
  color: #909399;
}

.form-actions {
  display: flex;
  justify-content: flex-start;
  padding-top: 20px;
  border-top: 1px solid #ebeef5;
}

.form-actions .el-button {
  margin-right: 12px;
}

/* 富文本编辑器容器样式 */
:deep(.editor-container) {
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  overflow: hidden;
}

/* 解决附件上传组件宽度问题 */
:deep(.input-with-select) {
  width: 100%;
}

/* Switch组件样式调整 */
.el-switch {
  --el-switch-on-color: #409eff;
  --el-switch-off-color: #dcdfe6;
}
</style>
